<template>
	<el-dialog
	   v-model="dialogVisible"
	   :title="title"
	   width="30%"
	   :before-close="centel"
	 >
	 <el-form
	    label-position="right"
	    label-width="100px"
	    :model="form"
	    style="max-width: 460px"
	  >
	    <el-form-item label="名称">
	      <el-input v-model="form.name" />
	    </el-form-item>
	 		<el-form-item label="作者">
	 		  <el-input v-model="form.user" />
	 		</el-form-item>
	 		<el-form-item label="评分">
	 		  <el-input v-model="form.gread" />
	 		</el-form-item>
	 		<el-form-item label="类型">
	 		  <el-input v-model="form.type" />
	 		</el-form-item>
	 		<el-form-item label="定价">
	 		  <el-input v-model="form.price" />
	 		</el-form-item>
	  </el-form>
	   <template #footer>
	     <span class="dialog-footer">
	       <el-button @click="centel">取消</el-button>
	       <el-button type="primary" @click="confirm">
	         确定
	       </el-button>
	     </span>
	   </template>
	 </el-dialog>
</template>

<script setup>
	import { reactive, ref,toRefs, defineProps,defineEmits } from 'vue'
	const props = defineProps({
	  //子组件接收父组件传递过来的值
	  form: {
	        type: Object,
	        default:()=> {},
		},
		dialogVisible: {
			type: Boolean,
		    default:()=> false,
		},
	  title:{
			type: String,
			 default:()=> "dd", 
		}
	})
	//使用父组件传递过来的值
	const {form,dialogVisible,title} =toRefs(props)
	const emit = defineEmits(['centel','confirm'])
	const centel=()=>{
		emit('centel')
	}
	const confirm=()=>{
		emit('confirm',form)
	}

</script>

<style>
</style>